<script setup>
import { onMounted, ref } from 'vue'
import { useStore } from '../../stores/store'
import { storeToRefs } from 'pinia'

const store = useStore()
const { proList,categoryList,searchList } = storeToRefs(store)
onMounted(() =>{
    store.handelProList()
    store.handelTotal()
    store.handelCategory()
    store.handelSearch('','')
})

const category = ref(categoryList[0])

// 秒杀功能
const isseckillChange = (proid,type,val) => {
    store.handelFlag(proid,type,val)
}

// 推荐功能
const isrecommendChange = (proid,type,val) => {
    store.handelFlag(proid,type,val)
}

const selet = ref('')
// 下拉框
const changeSelet = (val) => {
    console.log(val);
    selet.value = val
}

const input = ref('')

const searchPro = () => {
    store.handelSearch(selet.value,input.value)
}
</script>

<template>
    <div class="boss">
        <div class="box">
            <el-select v-model="category" filterable placeholder="全部"  @change="changeSelet">
                <el-option
                v-for="(item,index) in categoryList"
                :key="index"
                :label="item"
                :value="item"
                />
            </el-select>    
            <el-input v-model="input" placeholder="Please input" />
            <el-button type="primary" @click="searchPro">搜索</el-button>
        </div>
        <el-table 
        :data="searchList ?? proList" 
        style="width: 100%" 
        height="75vh"
        :border="true"
        >
            <el-table-column prop="category" label="产品分类"/>
            <el-table-column prop="brand" label="产品品牌"/>
            <el-table-column prop="proname" label="产品名称"/>
            <el-table-column label="图片">
                <template #default="scope">
                    <el-image :src="scope.row.img1" />
                </template>
            </el-table-column>
            <el-table-column label="是否秒杀">
                <template #default="scope">
                    <el-switch
                        :model-value="scope.row.isseckill"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        inline-prompt
                        :active-value="1"
                        :inactive-value="0"
                        @change="(val) => isseckillChange(scope.row.proid,'isseckill',val)"
                    />
                </template>
            </el-table-column>
            <el-table-column label="是否推荐">
                <template #default="scope">
                    <el-switch
                        :model-value="scope.row.isrecommend"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        inline-prompt
                        :active-value="1"
                        :inactive-value="0"
                        @change="(val) => isrecommendChange(scope.row.proid,'isrecommend',val)"
                    />
                </template>
            </el-table-column>
            <el-table-column label="产品价格">
                <template #default="scope">
                    ￥{{scope.row.originprice.toFixed(2)}}
                </template>
            </el-table-column>
            <el-table-column prop="discount" label="产品折扣"/>
            <el-table-column prop="sales" label="产品销量"/>
            <el-table-column prop="stock" label="产品库存"/>
        </el-table>
    </div>
</template>

<style scoped lang="scss">
.boss{
    background-color: white;
    padding: 0 20px;    

    & .box{
        width: 60%;
        display: flex;
        justify-content: space-evenly;
        margin: 10px auto;
    }
}

</style>